Prototyping has been a popular topic on web-design blogs this year. Many designers and developers have shared how prototypes have helped them improve the quality of their deliverables from design through implementation. The best summary and introduction to the topic I have found so far was written by Henrik Olsen at GUUUI in his article âThe promised land of prototypingâ?.
Prototype is still an ambiguous term in the web-development community. A prototype could be a very rudimentary model created on paper. âWireframesâ? are also a popular approach to prototyping. Both of these methods focus on functionality and scope while ignoring the form, look and feel.
We use many kinds of prototypes often at Navigator. Our most successful stories usually involve a prototype that represents the final application user interface designâa âhigh-fidelityâ? example of how the final application will look and behave. We represent every screen and most basic behaviors on each screen. The colors, fonts, and images all match the exact look and feel that we intend to implement.
There are numerous benefits of a high-fidelity prototype. The most obvious is an accurate representation of the final deliverable that all parties (clients, developers, project managers) can understand and use to set appropriate expectations.
While the benefits are numerous, there is a substantial cost for creating a âhigh-fidelityâ? model that paper prototypes and wireframes do not require. Developing a framework of required code takes time (usually more time that the project plan allows).
Over the next few months, Aaron and I will be working on a âstarter-kitâ? for prototyping. The basic goal is to create a library of XHTML, javascript, and css pages that will enable designers and developers to skip the up-front investment in code can get right to producing screens that the client understands. Hopefully developers inside Navigator, at our clients, and elsewhere will find such a tool useful.
Introductory articles on prototyping from other places on the web are listed on the right. More in-depth articles and tools are listed in my del.icio.us prototyping links.
To follow our progress on the hi-fi prototype starter-kit, subscribe to the RSS feed for the my prototyping category.